import React, { Component, ComponentClass } from 'react';
import {connect} from 'react-redux';
import {View, Image} from '@tarojs/components';
import {DateType} from '../../reducers/select-date';
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {http} from '../../utils/http';
import {
  GET_GOODS_USER_LIST_DATA, RESOURCE_URL
} from '../../constants/api';
import {GetRequest, vcmonitor} from "../../utils/tools";
import './accompany.scss';

type PageStateProps = {
  selectDate: DateType
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  userList: []
  loadMoreStatus: "more" | "loading" | "noMore"
  buyDate: string
  good_Id: number
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Accompany {
  props: IProps
}

@connect(({selectDate}) => ({
  selectDate,
}), () => ({}))

class Accompany extends Component {
  state: PageState = {
    userList: [],
    loadMoreStatus: "loading",
    buyDate: '',
    good_Id: 0
  }
  page = 1
  limite = 20

  async componentDidMount() {
    const {good_Id, buyDate} = Taro.getCurrentInstance().router.params;
    const data = await this.getGoodsUserList(good_Id, buyDate, this.page)
    this.setState({userList: data, good_Id, buyDate})
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  async getGoodsUserList(id, buyDate, page) {
    const data = await http.get(GET_GOODS_USER_LIST_DATA, {goods_id: id, buy_date: buyDate, page, length: this.limite})
    if (data) {
      if (data.list.length < this.limite) {
        this.setState({loadMoreStatus: 'noMore'})
      } else {
        this.setState({loadMoreStatus: 'more'})
      }
      return data.list
    } else {
      return []
    }
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: "loading"})
      const {good_Id, buyDate} = this.state
      const old = this.state.userList
      const userList = (await this.getGoodsUserList(good_Id, buyDate, ++this.page)) || []
      this.setState({userList: [...old, ...userList]})
    }
  }

  render() {
    const {userList} = this.state;
    return (
      <View className='tourist-detail-root'>
        <GzhAuth />
        {userList.length > 0 &&
        <View className='accompany-box'>
          {userList.map((item, index) =>
          { return (<View key={index} className='acc-item'>
            <View className='head-img'>
              <Image src={item.photo} mode='widthFix' />
            </View>
            <View>
              <View className='acc-name'>{item.nick_name}</View>
              <View className='info-box'>
                <View className='sex'><Image
                  src={item.sex == '男' ? RESOURCE_URL + "/resources/weapp/images/men-icon.png" : RESOURCE_URL + "/resources/weapp/images/ms-icon.png"}
                  mode='widthFix'
                /></View>
                <View className='date'>{item.add_date}</View>
              </View>
            </View>
          </View>) }
          )}
        </View>
        }
      </View>
    );
  }
}

export default Accompany as ComponentClass<PageOwnProps, PageState>;
